Learn more about common website layouts
進一步瞭解常見的網站佈局

單欄佈局（Single-column Layout）

定義與特點

• 僅使用一個垂直內容欄，頁面資訊自上而下排列；

• 常用於移動端響應式網站，因螢幕較窄，單欄利於滾動閱讀；

• 也可用於桌面網站，強調單一核心元素（如文字、影片、影象等）。

使用建議

• 適合強調主內容（如文章、產品描述、落地頁）；

• 排版應邏輯清晰，引導使用者順序閱讀；

• 示例：UX Planet 部落格，佈局集中於文字內容，適合長篇閱讀。

多欄佈局（Multicolumn Layout）

定義與特點

• 頁面橫向劃分為兩個或多個內容列；

• 常見於桌面端網頁，用以最大化螢幕空間利用；

• 可在移動端自動切換為單欄佈局以適應小屏裝置。

使用建議

• 運用視覺層級（Hierarchy）、色彩對比和內容多樣性組織資訊；

• 左/右側欄常用於廣告或附屬資訊展示；

• 示例：Financial Times 網站，左中右三欄清晰分割槽，頂端以大圖突出焦點文章。

方塊佈局（Box Layout）

定義與特點

• 頁面由大小不一的方塊組成，每個方塊展示一個資訊單元；

• 常用於電商首頁、作品集網站，快速導向不同內容主題或商品類別。

使用建議

• 統一大小時代表等權重，可用不同比例突出重點資訊；

• 每個方塊應具備清晰主題或功能；

• 示例：亞馬遜首頁，按主題分類顯示商品，有些方塊內嵌更多子內容。

主圖佈局（Featured Image Layout）

定義與特點

• 頁面主體為一張大圖或影片，佔據顯著位置（通常滿屏）；

• 強調視覺衝擊力與情感聯結，適合品牌或產品推廣。

使用建議

• 影象必須高質量、緊貼產品主題；

• 頂部常配固定導航欄（Sticky Menu），方便瀏覽；

• 示例：挪威旅遊官網，一入站即播放全屏風景影片，激發旅行興趣。

非對稱佈局（Asymmetrical Layout）

定義與特點

• 頁面元素不對稱分佈，形成刻意的不平衡感；

• 有助於突出特定設計元素，如圖片、標題或主資訊。

兩種眼動軌跡模式

1. F形佈局（F-shape Pattern）
   • 使用者視線從左至右，再向下重複，呈現“F”路徑；
   • 適合資訊量大、以文字為主的頁面（如維基百科）；
   • 重要資訊應置於頂部及左側。

1. Z形佈局（Z-shape Pattern）
   • 視線從左至右，然後對角線向下左再向右，類似“Z”路徑；
   • 適合內容較少、強調引導流程的頁面（如Dropbox）；
   • 用影象或按鈕引導使用者移動視線，提升內容吸收效率。

卡片網格佈局（Grid of Cards Layout）

定義與特點

• 頁面由多個同尺寸或可變尺寸的卡片組成，每張卡片展示預覽資訊；

• 常用於搜尋結果、影片推薦、內容聚合平臺；

• 與方塊佈局的區別：卡片屬於相同類別下的內容集合，而方塊為獨立資訊塊。

使用建議

• 可切換為列表檢視；

• 支援“懶載入”（Lazy Loading）逐步載入新內容；

• 響應式適配強，可根據螢幕自動調整卡片排布；

• 示例：TED官網首頁，每張卡片展示一個演講影片預覽（圖+標題）。

層疊蛋糕佈局（Tiered Layer Cake Layout）

定義與特點

• 頁面以層（row）為單位堆疊，每層內可設多個列；

• 各層間風格、排布不必統一，靈活度高；

• 特別適合響應式設計，移動端常轉為單列布局。

使用建議

• 每層內容應統一主題；

• 各層間保持視覺分隔，避免混淆；

• 示例：QFC 超市官網，桌面端多列展示促銷資訊，移動端自動切換為單欄。

設計師的思維（Think Like a UX Designer）

• 觀察法：在日常瀏覽中識別網站使用的佈局型別；

• 比對法：體驗不同佈局的優勢與劣勢；

• 使用者優先：根據使用者需求與使用情境選擇佈局，不盲目追隨流行趨勢；

• 靈活迭代：隨著產品發展，佈局也應持續最佳化和更新。